<template>
  <div>
    <div class="container">
      <div class="rightBox" style="overflow: auto">
        <div
          style="
            display: flex;
            width: 100%;
            flex-wrap: nowrap;
            overflow: hidden;
            overflow-y: hidden;
            overflow-x: auto;
          "
          class="scroll"
        >
          <!-- <div style="height: 300px;width: 50%;padding: 15px;border: 1.5px solid #e8e9eb;margin: 0 8px;box-sizing: border-box;margin-left: 0px;min-width: 320px;">
            <div  style="border-bottom: 1.8px solid #e8e9eb;padding-bottom: 15px;">
              <span>本周任务完成情况统计</span>
            </div>
            <div id="myEchartsBar" v-loading='barLoading' style="height: 280px;width: 100%;"></div>
          </div> -->
          <div
            style="
              width: 100%;
              height: 400px;
              padding: 15px;
              border: 1.5px solid #e8e9eb;
              box-sizing: border-box;
              margin-right: 0;
              min-width: 270px;
            "
          >
            <div
              style="
                border-bottom: 1.8px solid #e8e9eb;
                position: relative;
                padding-bottom: 15px;
              "
            >
              <span style="margin-right: 30px">一级指标评分</span>
              <el-select
                @change="timeChange('radar')"
                v-model="typeInfo.year"
                style="
                  width: 140px;
                  position: absolute;
                  top: -5px;
                  left: 135px;
                  z-index: 99;
                "
                size="mini"
                placeholder="请选择时间"
              >
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                @change="radarInfoChange"
                v-model="typeInfo.projectId"
                style="
                  width: 140px;
                  position: absolute;
                  top: -5px;
                  left: 280px;
                  z-index: 99;
                "
                size="mini"
                placeholder="请选择项目"
              >
                <el-option
                  v-for="item in radarProjectOptions"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div v-if="optionRadar.radar.indicator.length > 0">
              <div
                ref="myEchartsRaDar"
                v-loading="radarLoading"
                style="height: 400px; width: 100%"
              ></div>
            </div>
            <div
              style="display: flex; justify-content: center; width: 100%"
              v-else
            >
              <el-empty
                :image-size="180"
                description="暂无项目指标评分"
              ></el-empty>
            </div>
          </div>
        </div>
        <div
          style="
            height: 350px;
            width: 100%;
            padding: 15px;
            border: 1.5px solid #e8e9eb;
            margin-top: 20px;
            box-sizing: border-box;
          "
        >
          <div
            style="
              border-bottom: 1.8px solid #e8e9eb;
              padding-bottom: 15px;
              position: relative;
            "
          >
            <span>年度任务平均分</span>
            <el-select
              @change="timeChange('bar')"
              v-model="BarInfo.year"
              style="
                width: 140px;
                position: absolute;
                top: -5px;
                left: 135px;
                z-index: 99;
              "
              size="mini"
              placeholder="请选择时间"
            >
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-select
              @change="LineInfoChange"
              v-model="BarInfo.projectId"
              style="
                width: 140px;
                position: absolute;
                top: -5px;
                left: 280px;
                z-index: 99;
              "
              size="mini"
              placeholder="请选择项目"
            >
              <el-option
                v-for="item in barProjectOptions"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div v-if="optionBar.series[0].data.length > 0">
            <div
              ref="myEchartsBar"
              v-loading="lineLoading"
              style="height: 250px; width: 100%"
            ></div>
          </div>
          <div style="display: flex; justify-content: center" v-else>
            <el-empty :image-size="200" description="暂无项目平均分"></el-empty>
          </div>
        </div>
      </div>
      <div class="leftBox">
        <div class="recently" v-if="recentlyEndInfo.id">
          <span>离最近项目结束还有</span>
          <span style="font-size: 60px; font-weight: 500"
            >{{ recentlyEndInfo.distanceEndDays }}天</span
          >
          <div style="font-size: 20px">
            <span>{{ recentlyEndInfo.distanceEndHours }}小时</span
            ><span>{{ recentlyEndInfo.distanceEndmius }}分钟</span>
          </div>
          <div>
            <el-button type="primary" size="medium" @click="toProjectList"
              >查看项目列表</el-button
            >
          </div>
        </div>
        <div
          class="recently"
          style="display: flex; flex-direction: column; justify-content: center"
          v-else
        >
          <span>暂无项目</span>
          <div>
            <el-button
              v-if="hasAuth('sys:project:add')"
              type="primary"
              size="medium"
              @click="$router.push('/home/creationProject')"
              >创建项目</el-button
            >
          </div>
        </div>
        <div class="notice scroll" style="overflow-x: hidden; height: 450px">
          <div
            style="
              width: 100%;
              border-bottom: 1px solid #e5e5e5;
              padding: 10px;
              padding-bottom: 15px;
              margin: 5px 10px;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div>
              <i
                class="el-icon-s-promotion"
                style="color: #409eff; margin-left: 10px"
              ></i>
              公告
            </div>
            <div class="topAnnouncement">
              <p class="gundong">{{ announcement }}</p>
            </div>
            <div>
              <el-button
                type="primary"
                size="mini"
                @click="dialogVisible = true"
                v-if="hasAuth('sys:project:add')"
                >发布公告
              </el-button>
            </div>
          </div>
          <!-- 外层容器，设置固定高度和隐藏溢出 -->
          <div style="height: 100%; overflow: hidden; position: relative">
            <!-- 滚动内容区域 -->
            <div
              class="scroll-content"
              :style="{ transform: `translateY(${scrollOffset}px)` }"
            >
              <!-- 公告列表 -->
              <div
                style="
                  border-bottom: 1px dotted #e5e5e5;
                  width: 100%;
                  color: #999;
                  cursor: pointer;
                "
                @click="openAnnouncement(item)"
                class="announcementItem"
                v-for="(item, index) in duplicatedNoticeList"
                :key="index"
              >
                <div class="noticeBox" style="margin: 5px 10px">
                  <span class="noticeItem">{{ item.content }}</span>
                  <span
                    style="width: 40%; line-height: 20px; text-align: end"
                    >{{ item.createTime }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-dialog
          title="发布公告"
          :visible.sync="dialogVisible"
          width="30%"
          center
        >
          <el-form>
            <el-form-item lable="公告标题">
              <el-input
                placeholder="请输入公告标题"
                v-model="announcementInfo.title"
              ></el-input>
            </el-form-item>
            <el-form-item lable="公告标题" style="margin-bottom: 0px">
              <el-input
                type="textarea"
                rows="3"
                placeholder="请输入公告内容"
                resize
                v-model="announcementInfo.content"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox
                v-model="announcementInfo.isTop"
                :true-label="1"
                :false-label="0"
                >置顶公告</el-checkbox
              >
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="publicAnnouncement()"
              >发 布</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      barLoading: true,
      radarLoading: true,
      lineLoading: true,
      year: new Date().getFullYear(),
      recentlyEndInfo: null,
      noticeList: [],
      scrollOffset: 0, // 当前滚动偏移量
      scrollInterval: null, // 定时器
      typeInfo: {
        projectId: undefined,
        year: undefined,
      },
      BarInfo: {
        projectId: undefined,
        year: undefined,
      },
      optionBar: {
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "bar",
          },
        ],
        title: {
          // text:'本周任务完成情况'
        },
      },
      optionRadar: {
        title: {
          text: "",
        },
        legend: {
          data: [],
        },
        radar: {
          // shape: 'circle',
          indicator: [],
          axisName: {
            formatter: "【{value}】",
            color: "#428BD4",
          },
        },

        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [],
                // name: 'Allocated Budget'
              },
            ],
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              },
            },
          },
        ],
      },
      // optionBar: {
      //   title: {
      //     // text:'年度任务完成情况'
      //   },
      //   tooltip: {
      //     trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
      //     axisPointer: { //坐标轴指示器
      //       type: 'cross', //十字准星指示器
      //       label: {
      //         backgroundColor: '#ccc'
      //       }
      //     }
      //   },
      //   legend: {
      //     data: []
      //   },
      //   grid: {
      //     left: '3%',
      //     right: '5%',
      //     bottom: '3%',
      //     containLabel: true //grid 区域是否包含坐标轴的刻度标签
      //   },
      //   toolbox: {
      //     feature: {
      //       saveAsImage: {} //保存为图片
      //     }
      //   },
      //   xAxis: {
      //     type: 'category',
      //     boundaryGap: false, //与边缘留白区域
      //     data: []
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   series: [
      //     // {name: "云计算教研室", type: "line", tiles: "Total", data: ["220.0", "0.0", "0.0", "0.0", "0.0"]},
      //     // {name: "软件技术教研室", type: "line", tiles: "Total", data: ["0.0", "0.0", "0.0", "0.0", "0.0"]},
      //     // {name: "虚拟现实教研室", type: "line", tiles: "Total", data: ["0.0", "0.0", "0.0", "0.0", "0.0"]},
      //     // {name: "区块链教研室", type: "line", tiles: "Total", data: ["0.0", "220.0", "210.0", "200.0", "0.0"]},
      //     // {name: "辅导员", type: "line", tiles: "Total", data: ["220.0", "0.0", "0.0", "0.0", "0.0"]}
      //   ]
      // },
      announcement: "",
      dialogVisible: false,
      announcementInfo: {
        title: "",
        content: "",
        isTop: 0,
      },
      options: [],
      radarProjectOptions: [],
      barProjectOptions: [],
    };
  },
  computed: {
    // 复制一份公告列表，实现无缝衔接
    duplicatedNoticeList() {
      return [...this.noticeList, ...this.noticeList];
    },
  },
  beforeDestroy() {
    this.stopAutoScroll();
  },
  methods: {
    async initRecentInfo() {
      let res = await this.$get("/api/end/project");
      if (res.code == 200 && res.data != null) {
        this.recentlyEndInfo = res.data;
        let end = new Date(res.data.endTime);
        let start = new Date();
        this.recentlyEndInfo.distanceEndDays = parseInt(
          (end - start) / (1 * 24 * 60 * 60 * 1000)
        );
        this.recentlyEndInfo.distanceEndHours = parseInt(
          ((end - start) / (1 * 60 * 60 * 1000)) % 24
        );
        this.recentlyEndInfo.distanceEndmius = parseInt(
          ((end - start) / (1 * 60 * 1000)) % 60
        );
      }
    },
    toProjectList() {
      this.$store.commit("setTabs", {
        name: "/home/project",
        title: "项目列表",
      });
      this.$router.push("/home/project");
    },
    async initNotice() {
      let top = await this.$get("/api/notice/top");
      let noticeResult = await this.$get("/api/notice/list");
      this.noticeList = noticeResult.data.list;
      if (top.code == 200) this.announcement = top.data.content;
    },
    async initIndexInfo() {
      // let echartsReuslt3=await this.$get('/api/finish/week/count')
      let years = await this.$get("/api/project/years/list");
      if (years.data.length > 0) {
        let projectOptions = await this.$get(
          "/api/year/project/" + years.data[0]
        );
        // 默认选中第一条时间
        this.typeInfo.projectId = projectOptions.data[0].id;
        this.typeInfo.year = years.data[0];
        this.BarInfo.year = years.data[0];
        // 获取柱状图信息
        let echartsReuslt1 = await this.$get(
          "/api/columnar/chart",
          this.BarInfo
        );
        //获取雷达图信息
        let echartsReuslt2 = await this.$get("/api/radar/chart", this.typeInfo);
        if (echartsReuslt2.data.metrics != undefined) {
          this.options = years.data;
          this.radarProjectOptions = projectOptions.data;
          this.barProjectOptions = projectOptions.data;
          echartsReuslt2.data.metrics.forEach((item) => {
            this.optionRadar.radar.indicator.push({ name: item, max: 5 });
          });
          this.optionRadar.series[0].data[0].value = echartsReuslt2.data.value;
          // echartsReuslt2.data.xaxis.reverse()
        }
        this.optionBar.xAxis.data = echartsReuslt1.data.x;
        this.optionBar.series[0].data = echartsReuslt1.data.y;
      }
      this.$nextTick(() => {
        this.initEcharts();
      });
    },
    initEcharts() {
      console.log(this.$refs);
      // let myEchartsBar= this.$echarts.init(document.getElementById('myEchartsBar'))
      if (this.$refs.myEchartsRaDar) {
        let myEchartsRaDar = this.$echarts.init(this.$refs.myEchartsRaDar);
        this.optionRadar && myEchartsRaDar.setOption(this.optionRadar);
      }
      if (this.$refs.myEchartsBar) {
        let myEchartsBar = this.$echarts.init(this.$refs.myEchartsBar);
        this.optionBar && myEchartsBar.setOption(this.optionBar);
      }

      // let myChart= this.$echarts.init(document.getElementById('myEchartsBar'))
      // this.optionBar && myEchartsBar.setOption(this.optionBar);

      // this.barLoading=false
      this.radarLoading = false;
      this.lineLoading = false;
    },
    openAnnouncement(item) {
      this.$alert(item.content, "通知", {
        confirmButtonText: "确定",
      });
    },
    async publicAnnouncement() {
      let res = await this.$post("/api/notice/publish", this.announcementInfo);
      if (res.code == 200) {
        this.announcementInfo = {
          title: "",
          content: "",
        };
        this.initNotice();
        this.dialogVisible = false;
        this.$message.success(res.msg);
      }
    },
    async radarInfoChange() {
      this.radarLoading = true;
      let echartsReuslt2 = await this.$get("/api/radar/chart", this.typeInfo);
      if (echartsReuslt2.code == 200) {
        this.optionRadar.radar.indicator = [];
        echartsReuslt2.data.metrics.forEach((item) => {
          this.optionRadar.radar.indicator.push({ name: item, max: 5 });
        });
        this.optionRadar.series[0].data[0].value = echartsReuslt2.data.value;
      }
      this.$nextTick(() => {
        if (this.$refs.myEchartsRaDar) {
          let myEcharts = this.$echarts.init(this.$refs.myEchartsRaDar);
          myEcharts.clear();
          myEcharts.setOption(this.optionRadar);
        }
      });
      this.radarLoading = false;
    },
    async LineInfoChange() {
      this.lineLoading = true;
      let echartsReuslt1 = await this.$get("/api/columnar/chart", this.BarInfo);
      if (echartsReuslt1.code == 200) {
        this.optionBar.xAxis.data = echartsReuslt1.data.x;
        this.optionBar.series[0].data = echartsReuslt1.data.y;
      }
      console.log(this.$refs.myEchartsBar);
      this.$nextTick(() => {
        if (this.$refs.myEchartsBar) {
          let myEcharts = this.$echarts.init(this.$refs.myEchartsBar);
          // this.optionBar.radar.indicator=[]
          myEcharts.clear();
          myEcharts.setOption(this.optionBar);
        }
      });
      this.lineLoading = false;
    },
    async timeChange(name) {
      let year = name == "bar" ? this.BarInfo.year : this.typeInfo.year;
      let projectOptions = await this.$get("/api/year/project/" + year);
      if (name == "bar") {
        this.LineInfoChange();
        this.barProjectOptions = projectOptions.data;
        this.BarInfo.projectId = undefined;
      } else if (name == "radar") {
        this.radarProjectOptions = projectOptions.data;
        this.typeInfo.projectId = undefined;
      }
    },
    // 开始自动滚动
    startAutoScroll() {
      this.scrollInterval = setInterval(() => {
        // 每次滚动一个公告的高度（假设每个公告高度为 52px）
        this.scrollOffset -= 52;

        // 如果滚动到复制的部分，瞬间重置到顶部
        if (this.scrollOffset <= -this.noticeList.length * 52) {
          this.scrollOffset = 0; // 重置到顶部
        }
      }, 2000); // 每 2 秒滚动一次
    },
    // 停止自动滚动
    stopAutoScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
      }
    },
    // 点击公告的处理函数
    openAnnouncement(item) {
      console.log("点击公告：", item);
    },
  },
  mounted() {
    this.startAutoScroll();
    this.initRecentInfo();
    this.initIndexInfo();
    this.initNotice();
    let thizz = this;
    window.addEventListener("resize", function () {
      // let myEchartsBar = thizz.$echarts.init(document.getElementById('myEchartsBar'))
      let myEchartsRaDar = thizz.$echarts.init(this.$refs.myEchartsRaDar);
      let myEchartsBar = thizz.$echarts.init(this.$refs.myEchartsBar);
      // myEchartsBar.resize();
      myEchartsRaDar.resize();
      myEchartsBar.resize();
    });
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  display: flex;
  position: relative;

  .leftBox {
    display: flex;
    width: 35%;
    flex-direction: column;

    .recently,
    .notice {
      box-sizing: border-box;
      width: 100%;
      padding: 10px 20px;
      border: 1px solid #999;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .recently {
      font-weight: 600;
      line-height: 60px;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
      border: 0;
      // height: 40%;
      min-height: 300px;
    }

    .notice {
      height: 350px;
      margin-top: 20px;
      // height: 250px;
      // overflow: auto;
      width: 100%;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
      border: 0;
      padding: 0;

      .noticeBox {
        display: flex;
        justify-content: space-between;
        // width: 100%;
        font-size: 12px;
        padding: 10px 0;

        .noticeItem {
          width: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .rightBox {
    width: 65%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-right: 20px;
  }
}

.announcementItem:hover {
  background-color: #e5e5e5;
}

.topAnnouncement {
  width: 170px;
  margin-left: 30px;
  overflow: hidden;
}

.gundong {
  padding-left: 20px;
  font-size: 12px;
  color: #000;
  display: inline-block;
  white-space: nowrap;
  animation: 10s wordsLoop linear infinite normal;
}

.gundong:hover {
  /* 设置动画是否暂停 paused暂停*/
  animation: 10s wordsLoop linear infinite paused;
}

@keyframes wordsLoop {
  0% {
    transform: translateX(200px);
    -webkit-transform: translateX(200px);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

.scroll {
  overflow: auto;
}

.scroll::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #444;
}

.scroll::-webkit-scrollbar-track {
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.1);
}

/* 滚动内容区域的样式 */
.scroll-content {
  transition: transform 0.5s ease-in-out; /* 平滑滚动效果 */
}
</style>